<template>
  <div class="ChildPage TablePage" v-loading="loading">
    <vb-page ref="page">
      <template #headerBtn="scope">
        <el-button type="success" size="small" @click="syncYouzanStore" icon="el-icon-refresh">全量同步店铺</el-button>
      </template>
      <template #table-active="scope">
        <el-tag size="small" :type="scope.row.active? 'success': 'danger'">{{ scope.row.active? '开启': '关闭' }}</el-tag>
      </template>
      <template #table-handle-reset="scope">
        <el-button type="text" size="mini" @click="toggleYouzanStoreSync(scope.row)">{{ scope.row.active? '关闭': '开启' }}</el-button>
      </template>
    </vb-page>
  </div>
</template>

<script>
import {getCurrentInstance, ref} from "vue";
export default {
  mixins: [],
  components: {
  },
  data() {
    return {
    }
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const loading = ref(false)

    // 同步有赞店铺
    const syncYouzanStore = async() => {
      try {
        await proxy.$confirm(`确认开始同步吗?`, '确认', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return;
      }
      loading.value = true
      try {
        let res = await proxy.callApi('youzan_store_refresh')
        if (!res.res) return
        proxy.$message.success('同步完成!')
        proxy.$refs.page.data.reload()
      } finally {
        loading.value = false
      }
    }

    // 切换数据上传状态
    const toggleYouzanStoreSync = async(item) => {
      try {
        await proxy.$confirm(`确认切换启用状态吗?`, '确认', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
      } catch (e) {
        return;
      }
      loading.value = true
      try {
        let res = await proxy.callApi('youzan_store_sync', { id: item.id, cancel: item.active })
        if (!res.res) return
        proxy.$refs.page.data.reload()
      } finally {
        loading.value = false
      }
    }
    return {
      loading,
      syncYouzanStore,
      toggleYouzanStoreSync
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
